<template>
	<div class="creative_box">
	     <div class="left">
	     	<div class="dialog-header"  style="vertical-align: middle;">
     		    <a href="javascript:;" @click="cancel">
     		    	<img src="../../../image/back.png"/>
     		    </a>
                <span class="s_fs_20" style="vertical-align: middle;">	
                	添加创意    
                </span>
            </div>
            <div class="dialog-list">
            	<div class="tap-header">
            		<div class="mb10 s_fc_9" style="padding-left: 6px;text-align: left; ">创意类型：</div>
            		<div style="margin-left: -20px" >                      
                        <label style="width:120px; cursor: pointer;" @click="type='img'" class="icon-circle-wrapper ml56 active" value="2" >
                            <div class="icon-circle" style="margin-bottom: 10px;" >
                                <img src="../../../image/img1-1.jpg" v-show="type!='img'"  />
                                <img src="../../../image/img1.jpg" v-show="type=='img'" />
                            </div>
                            <div class="icon-name" style="text-align: center">图片</div>
                            <input type="radio" name="format" value="2" class="hide" id="mx_n_78" >
                        </label>
                        <label style="width:120px; cursor: pointer;" @click="type='text'" class="icon-circle-wrapper ml56" value="5" >
                            <div class="icon-circle" style="margin-bottom: 10px;" >
                                 <img src="../../../image/font1.jpg" v-show="type!='text'" />
                                 <img src="../../../image/font1-1.jpg" v-show="type=='text'" />
                            </div>
                            <div class="icon-name" style="text-align: center">文字链</div>
                            <input type="radio" name="format" value="5" class="hide" id="mx_n_73" >
                        </label>
                    </div>
            	</div>
            	<ul class="tap-list">
            		<li>
            			<span class="label">创意类目:</span>
            			<el-select v-model="value" style="width:236px;height: 32px;" placeholder="请选择">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
					   </el-select>
            		</li>
            		<li v-show="type=='text'">
            			<span class="label">创意名称:</span><input v-model="name" type="text" />
            		</li>
            		<li>
            			<span class="label">链接类型:</span> 
            			<el-radio v-model="radio" label="1">手动输入</el-radio>
                        <el-radio disabled  v-model="radio" label="2">淘积木链接</el-radio>
            		</li>
            		<li class="msg_li" >
            			<span class="msg_text">
            				当前有 38.51% 同行使用，转化率提升 5.47% ，回报率提升 7.7%
            			</span>
            		</li>
            		<li style="height: 86px;">
            			<span class="label">URL 链接:</span><input  v-model="click_url" placeholder="https://" type="text"  />
            			<el-checkbox style="margin-left: 80px;" v-model="is_trans_to_wifi">转换为无线店铺首页/宝贝链接</el-checkbox>
            		</li>
            		<li v-show="type=='img'">
            			<span class="label">创意内容:</span>
            			<a href="javascript:;" class="file_box">
            				上传
            				<input type="file"  class="file" name="" id="file" value="" />
            			</a>
            		</li>
            	</ul>
            	<div>
            		<el-button type="info"@click="cancel" >取消</el-button>
            		<el-button type="primary" @click="sure">完成</el-button>
            	</div>
            </div>
	     </div>
	     <div class="right">
	     	<div class="mt10" >
	     		<img src="../../../image/creative_img.jpg" v-show="type=='img'" >
	     		<img src="../../../image/creative-text.jpg" v-show="type=='text'" />
	     	</div>
	     </div>
	</div>
</template>
<style src="./style.css" scoped lang="less"></style>
<script src="./script.js"></script>